<template>
  <div class="columngroupitem">
    <router-link
      :to="{
        name: name,
        params: {
          contentid: item.contentId,
          usid: item.userId,
        },
      }"
    >
      <ColumnItem :item="item.content[0]"></ColumnItem
      ><i
        class="icon-shuffling-banner moreimage"
        v-if="item.content.length > 1"
      ></i></router-link
    ><ItemPanelHeader :item="item" v-if="isShowHeader">
      <div slot="itemPanelHeaderMenu">
        <GoodButton :item="item"></GoodButton>
        <div>{{ item.goodCount }}</div>
      </div></ItemPanelHeader
    >
  </div>
</template>
<script>
export default {
  name: "ColumnGroupItem",
  props: {
    isShowHeader: {
      type: Boolean,
      default() {
        return true;
      },
    },
    name: {
      type: String,
      default() {
        return "";
      },
    },
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  components: {
    ColumnItem: () =>
      import(
        /* webpackChunkName:"columnItem" */ "../../components/common/columnItem"
      ),
    ItemPanelHeader: () =>
      import(
        /* webpackChunkName:"itemPanelHeader" */ "../../components/common/itemPanel/itemPanelHeader.vue"
      ),
    GoodButton: () =>
      import(
        /* webpackChunkName:"goodButton" */ "../../components/common/goodButton"
      ),
  },
  data() {
    return {};
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.columngroupitem {
  position: relative;
  overflow: hidden;
  margin: 0 5 / @base 0 0;
  height: 100%;
  .moreimage {
    position: absolute;
    top: 5 / @base;
    right: 10 / @base;
    font-size: 20 / @base;
    color: #fff;
    z-index: 3;
  }
}
</style>
